<template>
  <div style='width:100%'>
   <!-- <el-aside style="width: 55px;">
      <div class="lef-warp">
        <span class="el-icon-arrow-left"></span>
        <span class="font">选择栏目</span>
      </div>
    </el-aside>
    <el-main>
      EHS
    </el-main> -->
    <template v-if="is_admin">
    	<el-row  style='width:100%'>
  			
  			<el-col :span='19'  style='text-align: left;padding-left: 30px;'>
  				<el-date-picker
  				v-model='select_date'
  				type='daterange'
  				format='yyyy年MM月dd日'
  				value-format='yyyy-MM-dd'
  				range-separator='至'
  				start-placeholder='开始时间'
  				end-placeholder='结束时间'></el-date-picker>
  			</el-col>
  			<el-col :span='5' style=' text-indent: 20px;line-height: 40px; text-align: right;'>
  				  <el-button @click="toupdate()" >报表更新</el-button></el-col>
  		</el-row>
  		<el-row>
  			<el-col :span='8' style='height:350px'>
  				<el-col :span='24' class='title_bar'>部门通过率</el-col>
  					<div ref='chart1' style='width:100%;height:300px'></div>
  			</el-col>
  			<el-col :span='8' style='height:350px'>
  				<el-col :span='24' class='title_bar'>部门参与率</el-col>
  					<div ref='chart2' style='width:100%;height:300px'></div>
  			</el-col>
  			<el-col :span='8' style='height:350px'>
  				<el-col :span='24' class='title_bar'>部门成绩排名</el-col>
  					<div ref='chart3' style='width:100%;height:300px;padding-left: 20px;'>
  						<el-table
  						:data='tab_list'

  						>
  						<el-table-column type='index' label='排名' align='center'></el-table-column>
  						<el-table-column prop='name' label='部门名称' align='center' show-overflow-tooltip></el-table-column>
  						<el-table-column prop='score' label='成绩' align='center'></el-table-column>

  						</el-table>
  					</div>
  			</el-col>
  		</el-row>
			<el-row>
					<el-col :span='8' style='height:350px'>
  				<el-col :span='24' class='title_bar'>考试通过率</el-col>
  					<div ref='chart3' style='width:100%;height:300px'></div>
  			</el-col>
  			<el-col :span='8' style='height:350px'>
  				<el-col :span='24' class='title_bar'>参与率报表</el-col>
  					<div ref='chart4' style='width:100%;height:300px'></div>
  			</el-col>
					<el-col :span='8' style='height:350px'>
  				<el-col :span='24' class='title_bar'>考试平均分</el-col>
  					<div ref='chart5' style='width:100%;height:300px'></div>
  			</el-col>
			</el-row>
  		<el-row >
  			<el-col :span='5' style='text-indent: 20px;line-height: 40px;'>错题统计</el-col>
  		
  		</el-row>
  		<el-row style='margin-top:10px'>
  			<el-table
  			:data='chart4'
        @row-click="rowClickHandle"
  			>
  				<el-table-column prop='type' label='类型' width='100px' align='center'>
  					<template slot-scope='scope'>
  						<span>{{typelist[scope.row.type]}}</span>
  					</template>
  				</el-table-column>
  				<el-table-column prop='title' label='题干'  align='center'></el-table-column>
  				<el-table-column prop='category' label='分类'  width='200px' align='center'></el-table-column>
  				<el-table-column prop='count' label='错题次数'  width='100px' align='center'></el-table-column>
  			</el-table>
  		</el-row>
    </template>
  </div>
</template>

<script>
	var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');

	var moment = require('moment');
export default {
  name: 'HomeWating',
	created(){
		let now_time = moment().format('YYYY-MM-DD');
		let start_time = moment().subtract(1,'month').format('YYYY-MM-DD')
		this.select_date = [
			start_time,
			now_time
		];
    let userinfo = JSON.parse(window.localStorage.getItem('userinfo'));
    this.is_admin = !(userinfo.type != 'admin')

	},
	watch:{
		select_date(val){
			this.getchart4()
		}
	},
	data(){return {
		typelist:{single:'单选',multiple:'多选',judge:'判断',text:'填空',composite:'问答'},
		tab_list:[],
		select_date:[],
		chart4:[],
    is_admin: false
	}},
	mounted(){
    this.getAllchart()
		// this.getchart1()
		// this.getchart2()
		// this.getchart3()
	},
	methods:{
    rowClickHandle (row) {
      this.$router.push({path: `/home/questDetail/${row.question_id}`})
    },
    getAllchart() {
      this.$API.get123Chart().then(res => {
        this.apply_bar('chart1', res.pass.map(item => {return {name: item.name, value: item.ratio}}))
        this.apply_bar('chart2', res.enroll.map(item => {return {name: item.name, value: item.ratio}}))
    		let item = {
    			name:'',
    			value:''
    		}
    		res.score = !res.score?[]:res.score;
    		for(let a = 0 ;a < 5 ; a++){
    			if(!res.score[a]){
    				res.score.push(item)
    			}
    		}
    		this.tab_list= res.score
			})
			
			this.$API.get345Chart().then(res=>{
				this.apply_bar('chart3', res.pass.map(item => {return {name: item.name, value: item.ratio}}))
				this.apply_bar('chart4', res.enroll.map(item => {return {name: item.name, value: item.ratio}}))
				this.apply_bar('chart5', res.score.map(item => {return {name: item.name, value: item.score}}),false)
			})
    },
		// getchart1(){
		// 	this.$API.getChart1().then(res=>{
		// 		this.apply_bar('chart1',res)
		// 	})
		// },
		// getchart2(){
		// 	this.$API.getChart2().then(res=>{
		// 		this.apply_bar('chart2',res)
		// 	})
		// },
		// getchart3(){
		// 	this.$API.getChart3().then(res=>{
		// 		let item = {
		// 			name:'',
		// 			value:''
		// 		}
		// 		res = !res?[]:res;
		// 		for(let a = 0 ;a < 5 ; a++){
		// 			if(!res[a]){
		// 				res.push(item)
		// 			}
		// 		}
		// 		this.tab_list= res
		// 	})
		// },
		toupdate(){    //更新报表
			this.$API.toUpdatehome()
		},
		getchart4(){
			let date = {
				start:this.select_date[0],
				end:this.select_date[1]
			}
			this.$API.getChart4(date).then(res=>{
				this.chart4 = res
			})
		},
		apply_bar(idname,data,chart5=true){
			let title = '部门通过率';
			let chart = echarts.init(this.$refs[idname])
			let dataname = [];
			let datalist = [];
			switch(idname){
				case 'chart2':title='部门参与率';break;
				case 'chart3':title='考试通过率';break;
				case 'chart4':title='参与率报表';break;
				case 'chart5':title='考试平均分';break;
			}
			if(data){
				data.forEach(item=>{
					let text = [];
					let name = item.name.split('')
					let fa = () =>{
						text.push(name.splice(0,5).join(''));
						if(name.length)fa()
					}
					fa()
					dataname.unshift(text.join('\n'));
					datalist.unshift({name:item.name,value:chart5?(item.value * 100).toFixed(1):item.value})
				})
			}
			let option = {
				color:'#0366bb',
				tooltip:{
					trigger:"axis",
					formatter:chart5?'{a}<br/>{b}:{c}%':'{a}<br/>{b}:{c}分',
					axisPointer:{
						type:'shadow'
					}
				},
				grid:{
					top:'10px',
					left:'20px',
					right:'30px',
					bottom:"10px",
					containLabel:true
				},
				series:[{
					type:'bar',
					barWidth:'60%',
					data:datalist,
					name:title
				}]
			}

			let xAxis = {
				xAxis:[{
					type:'value',
          axisLabel: {
            formatter: chart5?'{value}%':'{value}分'
          }
				}]
			}

			let yAxis = {
				yAxis:[{
					type:'category',
					data:dataname,
					 axisTick: {
                alignWithLabel: true
            }
				}]
			}

			let options = Object.assign(option,xAxis,yAxis)
			chart.setOption(options)
		}
	},
  beforeRouteEnter (to, from, next) {
    if (from.name == 'Login') {
      next();
      return ;
    }

    let userinfo = JSON.parse(window.localStorage.getItem('userinfo'));
    if (userinfo.type != 'admin') {
      next(false);
    } else {
      next(true);
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.home-wating {
  height: 100%;
  min-height: 40vh;
}
.home-wating .el-aside {
  display: flex;
  justify-content: center;
  align-items: center;
}
.home-wating .lef-warp {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: lefwarp 8s infinite;
  color: #0366bb;
  cursor: default;
}
.home-wating .lef-warp .font {
  writing-mode: tb-rl;
}
.home-wating .el-main {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  animation: colorBreath 4s infinite;
  color: #44d5b7;
  cursor: default;
}
@keyframes lefwarp {
  0%, 50%, 100% {
    transform: translateX(0);
    opacity: 0.8;
  }
  25%, 75% {
    transform: translateX(-10px);
    opacity: 0;
  }
}
@keyframes colorBreath {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
}

.title_bar{
	text-align:center;
}


</style>
